<template>
  <view class="page ">
    <view class="rf-profile " :style="{ paddingTop: safeTop + 45 + 'px' }">
      <!--头部-->
      <view class="user-section" style=" height:auto">
        <!--用户信息-->
        <view class="user-info-box">
          <view class="portrait-box" @tap="navTo(mRouteConfig.userinfo)">
            <view class="portrait">
              <rf-image
                :src="state.userInfo?.head_portrait || headImg"
                border-radius="50%"
                height="88"
                width="88"
              />
            </view>
            <view class="username in1line font-weight-500">
              {{ state.userInfo?.nickname || state.userInfo?.realname || '登录/注册' }}
            </view>
          </view>
        </view>
      </view>



      <view class="rf-account-bill">
        <!-- 我的测试报告标题 -->
        <view class="report-title-row">
          <text class="iconfont icon-report" style="margin-right: 8rpx;">📝</text>
          <text class="report-title-text">我的测试报告</text>
        </view>
        <!--账单明细列表-->
        <view v-if="state.integralList.length > 0" class="rf-bill-list flex-wrap-row">
          <view
            v-for="(item, index) in state.integralList"
            :key="index"
            class="rf-list-item report-card"
            @tap.stop="navTo(mRouteConfig.questionRes, { id: item.id })"
          >
            <view class="card-header">
              <text class="score">{{ item.sorce || 3 }}</text>
              <text class="desc">分</text>
            </view>
            <view class="card-graph">
              <!-- 可用图片或SVG占位 -->
              <svg class="graph-svg" width="100%" height="60" viewBox="0 0 200 60">
                <polyline points="0,50 40,40 80,30 120,35 160,20 200,30" fill="none" stroke="#fff" stroke-width="4" />
              </svg>
            </view>
            <view class="card-footer">
              <text class="date">{{ formatDate(item.created_at) }}</text>
              <text class="time">{{ formatTime(item.created_at) }}</text>
            </view>
          </view>
          <rf-load-more
            v-if="state.integralList.length > 0"
            :status="state.loadingType"
            class="load-more"
          />
        </view>
        <rf-empty
          v-if="state.integralList.length === 0 && !state.loading"
          info="暂无记录"
        />
        <!--加载动画-->
        <rf-loading :active="state.loading" />
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import mRouteConfig from '@/config/routes';
import {computed, reactive} from 'vue';
import {onLoad, onPullDownRefresh, onReachBottom,} from "@dcloudio/uni-app";
import {formatToDateTime,} from "@/utils/dateUtil";
import mHelper from "@/utils/helper";
import memberApi from "@/api/invShop/member";
import question from '@/api/question';
import {CreditsLog,} from "@/response/profile";
import {MemberLevel, Profile} from '@/response/profile';
import store from '@/store';
import {Route} from '@/response/route';
import mRouter from '@/utils/routerUtil';
// 头部安全距离
const safeTop = computed(() => {
  let sysInfo: AnyObject = uni.getSystemInfoSync();
  return sysInfo?.safeAreaInsets?.top || 0;
});


// 统一跳转接口,拦截未登录路由
const navTo = (route: Route, query = {}) => {
  if (!route) return;
  if (!state.userInfo?.memberCard?.status && route === mRouteConfig.accountCenter) return;
  !hasLogin.value ? mHelper.backToLogin() : mRouter.push({route, query});
};
// 自定义链接跳转
const normalNavTo = (link: AnyObject, title: string) => {
  if (!hasLogin.value) {
    mHelper.backToLogin();
    return;
  }
  if (link.route === 'serviceCenter') {
    navTo(mRouteConfig.serviceCenter);
    return;
  }
  if (link.route === 'service') {
    if (globalConfig.value.app_service_type === 0) {
      mHelper.toast('暂不提供客服功能');
      return;
    }
    toService(link);
    return;
  }
  if (title === '分享') {
    if (mHelper.platformGroupFilter() !== PlatformGroupEnum.WECHAT_MP) {
      share();
    }
    return;
  }
  mHelper.handleBasicNavTo(link);
};
const themeColor = mHelper.getThemeColor();
const billTypeList = [
  {
    state: 1,
    text: "全部",
  },
  {
    state: 2,
    text: "收入",
  },
  {
    state: 3,
    text: "支出",
  },
];
// 是否登录
let hasLogin = computed(() => {
  return store.getters['user/hasLogin'];
});

let state = reactive({
	 userInfo: {} as Profile,
  page: 1,
  loadingType: "more",
  integralList: [] as CreditsLog[],
  tabCurrentIndex: 0,
  loading: true,
});

onLoad((options) => {
  initData(options);
});

// 下拉刷新
onPullDownRefresh(() => {
  state.loading = true;
  state.page = 1;
  state.integralList = [];
  getIntegralListList("refresh");
});
// 加载更多
onReachBottom(() => {
  if (state.loadingType === "noMore") return;
  state.page++;
  getIntegralListList();
});

// 数据初始化
const initData = async (options) => {
  if (hasLogin.value) {
    await getMemberInfo();

  getIntegralListList();


  } else {
    state.loading = false;
    resetSectionData();
  }
};

// 获取用户信息
const getMemberInfo = async () => {
  // try {
    state.userInfo = (await memberApi.getMemberInfo()) as unknown as Profile;
	console.log("userInfo", state.userInfo)
    state.loading = false;
    await setSectionData();

  // } catch (e) {
  //   //
  //   resetSectionData();
  //   state.loading = false;
  // }
};


// 清空个人中心的各模块状态
const resetSectionData = () => {
  store.commit('notify/setNotifyNum', {notifyNum: 0});
  store.commit('notify/setCartNum', {cartNum: 0});

};
// 给个人中心的各模块赋值
const setSectionData = () => {
  // 更新userInfo缓存
  store.commit('user/setUserInfo', {userInfo: state.userInfo});
};



const time = (val: string) => {
  return formatToDateTime(Number(val) * 1000, "YYYY-MM-DD HH:mm:ss");
};
const numFilter = (val: string) => {
  return parseInt(val) >= 0 ? `+${val}` : val;
};
// 顶部tab点击
const tabClick = (index: number) => {
  state.page = 1;
  state.integralList.length = 0;
  state.loading = true;
  state.tabCurrentIndex = index;
  getIntegralListList();
};

// 获取积分
const getIntegralListList = async (type = "") => {
  const params: AnyObject = {};
  params.type = 1;
  if (state.tabCurrentIndex) params.num_type = state.tabCurrentIndex;
  params.page = state.page;
  try {
	     // const data = await memberApi.getFootPrintList(params) as unknown as CreditsLog[];
    const data = await question.getQuestionLogs(params) as unknown;
    state.loading = false;
    if (type === "refresh") {
      uni.stopPullDownRefresh();
    }
    state.loadingType = data.list.length < 10 ? "noMore" : "more";
    state.integralList = [...state.integralList, ...data.list,];
  } catch (e) {
    state.loading = false;
    if (type === "refresh") {
      uni.stopPullDownRefresh();
    }
  }
};

const formatDate = (timestamp: string) => {
  if (!timestamp) return '';
  return formatToDateTime(Number(timestamp) * 1000, "YYYY-MM-DD");
};
const formatTime = (timestamp: string) => {
  if (!timestamp) return '';
  return formatToDateTime(Number(timestamp) * 1000, "HH:mm:ss");
};
</script>
<style lang="scss" scoped>
.rf-account-bill {
  position: absolute;
  width: 100%;
  height: 100%;

  .rf-bill-list {
    .rf-list-item {
      background-color: $color-white;
      padding: $spacing-lg;
      border: 1rpx solid rgba(0, 0, 0, .06);
    }

    .rf-list-item:last-child {
      border: none;
    }
  }
}
</style>
<style lang="scss" scoped>


.page {
  background: linear-gradient(135deg, #e6f0ff 0%, #b3d1ff 100%);
  position: relative;

.rf-profile {
	background: url('/static/image/top_bg.png') top center no-repeat;
	background-size: 100% 400rpx, 100% 100%;
	min-height: 100vh;

  .user-section {
    padding: 30rpx 30rpx;
    position: relative;
    height: 510rpx;

    &__bg {
      position: absolute;
      left: 0;
      bottom: 0;
      opacity: 0.84;
      z-index: 2;
    }

    .user-info-box {
      // margin-top: 40rpx;
      height: 120rpx;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 9;
      justify-content: space-between;

      .portrait-box {
        display: flex;
        align-items: center;

        .portrait {
          flex-shrink: 0;
          border-radius: 50%;
          border: 2rpx solid #fff;
        }

        .username {
          font-size: $font-lg + 6rpx;
          color:#000;
          margin-left: 20rpx;
        }

        button {
          background-color: transparent;
          font-size: $font-lg + 6rpx;
          color: $font-color-dark;
          border: none;
        }

        button::after {
          border: none;
        }
      }
    }

    .account-info {
      display: flex;
      position: relative;
      z-index: 999;

      .tj-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin: 30rpx 0;
        font-size: $font-sm;
        color: $color-white;
      }
    }

    .vip-card-box {
      width: calc(100% - 60rpx);
      margin: $spacing-sm $spacing-lg 0;
      height: 160rpx;
      background-size: 100% 100%;
      z-index: 5;
      position: absolute;
      bottom: -70rpx;
      left: 0;
      color: #c85e00;

      .vip-card-bg {
        position: absolute;
        width: 100%;
        height: 96%;
      }

      .vip-card-info {
        right: 24rpx;
        top: 32rpx;
        width: 580rpx;
        position: absolute;
        display: flex;
        flex-direction: column;
        border-radius: 12rpx;

        .tit {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .tit-wrap {
            line-height: 1.5;
            font-size: $font-lg + 2rpx;
            display: flex;
            align-items: center;

            .detail {
              font-size: $font-sm;
              height: 48rpx;
              padding: 2rpx 24rpx 0;
              line-height: 48rpx;
              background-color: #f8ce93;
              border-radius: 30rpx;
            }
          }

          .b-btn {
            width: 140rpx;
            height: 42rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: $font-sm;
            border-radius: 21rpx;
            border: 1rpx solid #c85e00;
          }
        }

        .e-m {
          font-size: $font-base - 2rpx;
        }
      }
    }
  }

  .cover-container {
    margin-top: 90rpx;
    margin-bottom: 30rpx;
    padding: 0 30rpx;

    .promotion-center {
      background: #fff;
      margin-bottom: 20rpx;
      border-radius: 10rpx;

      .header {
        display: flex;
        justify-content: space-between;
        padding: $spacing-base $spacing-sm $spacing-base $spacing-lg;
      }

      .header-b {
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
      }

      /*分类列表*/
      .category-list {
        width: 100%;
        padding: 0 0 30rpx 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .category {
          width: 25%;
          margin-top: 50rpx;

          .category-image {
            width: 160rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 68rpx;
          }

          .category-btn {
            line-height: 1.2 !important;
            width: 100%;
            height: auto;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            border: 0;
          }

          .category-btn:after {
            border: none;
            background: none;
          }
        }
      }
    }

    .tj-sction {
      justify-content: space-around;
      display: flex;
      align-content: center;
      background: #fff;
      border-radius: 10rpx;

      .tj-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin: 30rpx 0;
        font-size: $font-sm;
        /*border-right: 2rpx solid rgba(0, 0, 0, 0.2);*/
      }

      .tj-item:last-child {
        border-right: none;
      }

      .num {
        line-height: 1;
        height: 40rpx;
      }

      .red {
        color: $base-color;
      }
    }

    .order-section {
      justify-content: space-around;
      display: flex;
      align-content: center;
      background: #fff;
      border-radius: 10rpx;
      padding: 20rpx 0;

      .order-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        font-size: $font-sm;
        color: $font-color-dark;
        position: relative;
      }

      .badge {
        position: absolute;
        top: -12rpx;
        right: 4rpx;
      }

      .iconfont {
        font-size: 48rpx;
      }
    }

    .category-list-1 {
      .category {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 26rpx 32rpx;
        line-height: 1.2 !important;

        .img {
          display: flex;
          align-items: center;
        }
      }

      .category:after {
        border: none;
        background: none;
      }
    }
  }
}

.rf-bill-list.flex-wrap-row {
  display: flex;
  flex-wrap: wrap;
}
.rf-list-item.two-col-row {
  width: 50%;
  box-sizing: border-box;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  font-size: 32rpx;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rf-list-item.left-side {
  text-align: left;
  padding-left: 24rpx;
}
.rf-list-item.right-side {
  text-align: right;
  padding-right: 24rpx;
}
.rf-list-item.report-card {
  width: 46%;
  box-sizing: border-box;
  margin: 2% 2%;
  padding:  12rpx 24rpx 12rpx;
  border-radius: 20rpx;
  background: linear-gradient(135deg, rgba(58, 123, 213, 0.7) 0%, rgba(58, 123, 213, 0.7) 100%);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
  color: #fff;
  position: relative;
  min-height: 220rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .card-header {
    display: flex;
    align-items: flex-end;
    .score {
      font-size: 60rpx;
      font-weight: bold;
      margin-right: 8rpx;
      line-height: 1;
    }
    .desc {
      font-size: 28rpx;
      opacity: 0.9;
      margin-bottom: 8rpx;
    }
  }
  .card-graph {
    width: 100%;
    margin: 16rpx 0 8rpx 0;
    .graph-svg {
      width: 100%;
      height: 60rpx;
      opacity: 0.8;
    }
  }
  .card-footer {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 24rpx;
    .date {
      margin-right: 12rpx;
      color: #fff;
      font-weight: 500;
      text-shadow: 0 2rpx 8rpx #1a4fa0;
    }
    .time {
      color: #ffe066;
      font-weight: 500;
      text-shadow: 0 2rpx 8rpx #1a4fa0;
    }
  }
}

.report-title-row {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  margin: 32rpx 0 24rpx 24rpx;
  .icon-report {
    font-size: 36rpx;
    color: #fff;
  }
  .report-title-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #388FFE;
  }
}
}
</style>
<style lang="scss" scoped>
// .bg-blue-gradient {
//   min-height: 100vh;
//   width: 100vw;
//   position: fixed;
//   left: 0;
//   top: 0;
//   z-index: 0;

//   background: radial-gradient(ellipse at 60% 30%, rgba(0, 120, 255, 0.25) 0%, rgba(0, 120, 255, 0.10) 40%, transparent 70%),
//               radial-gradient(ellipse at 40% 60%, rgba(0, 120, 255, 0.18) 0%, transparent 60%),
//               linear-gradient(135deg, #2566e8 0%, #1e90ff 100%);
//   overflow-x: hidden;
// }

</style>
